<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>Imperial</title>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
	<meta name="author" content="" />

	<!-- CSS
  ================================================== -->
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <link rel="stylesheet" type="text/css" href="styles/inner.css" />

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Oswald:700,400' rel='stylesheet' type='text/css' />
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="bodychild">
	<div id="outercontainer">
    	
        <!-- HEADER -->
        <div id="outerheader">
            <header>
            	<section id="top">
                    <div id="logo">
                        <a href="index.html"><img src="images/logo.png" alt="" /></a>
                    </div>
                    <ul id="sn">
                        <li><a href="http://youtube.com" title="Youtube"><span class="icon-img" style="background:url(images/social/youtube.png)"></span></a></li>
                        <li><a href="http://stumbleupon.com" title="Stumbleupon"><span class="icon-img" style="background:url(images/social/stumbleupon.png)"></span></a></li>
                        <li><a href="http://pinterest.com" title="pinterest"><span class="icon-img" style="background:url(images/social/pinterest.png)"></span></a></li>
                        <li><a href="http://twitter.com" title="Twitter"><span class="icon-img" style="background:url(images/social/twitter.png)"></span></a></li>
                        <li><a href="https://plus.google.com" title="Google+"><span class="icon-img" style="background:url(images/social/google.png)"></span></a></li>
                        <li><a href="http://facebook.com" title="Facebook"><span class="icon-img" style="background:url(images/social/facebook.png)"></span></a></li>
                    </ul>              
                </section>
                <section id="navigation">
                    <nav>
                        <ul id="topnav" class="sf-menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a>
                            	<ul>
                                    <li><a href="single.html">Blog Detail</a></li>
                                    <li><a href="#">Dropdown</a>
                                        <ul>
                                            <li><a href="#">Only</a></li>
                                            <li><a href="single.html">Example of</a></li>
                                            <li><a href="#">The Dropdown</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="service.html">Services</a></li>
                            <li><a href="blog.html" class="current">Blog</a></li>
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="element.html">Element</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul><!-- topnav -->
                    </nav><!-- nav -->
                </section>
                                
                <div class="clear"></div>
            </header>
        </div>
        <!-- END HEADER -->
        
        <!-- BEFORE CONTENT -->
        <div id="outerbeforecontent">
        	<div id="beforecontent">
            	<section id="beforethecontent">
					<div class="intro-l">
                    	<h1 class="pagetitle">Blog</h1><span class="pagedesc">this can be ur tagline or something you want</span>
                    </div>
                    <div class="intro-r">
                    	Donec consectetur libero ut tortor condimentum<br />
						<h2>Come &amp; Join Our Newsletter</h2>
                    </div>
                    <div class="clear"></div>
                </section>
            </div>
        </div>
        <!-- END BEFORE CONTENT -->
        
        <!-- MAIN CONTENT -->
        <div id="outermain">
        	<div id="maincontent">
        	<section id="mainthecontent">
            	<section id="content" class="positionleft">

                    <article class="post">
                         <div class="entry-utility">
                            <div class="posttime">June 20</div>
                            <div class="postyear">2012</div>
                            by <a href="#">Admin</a><br /> on <a href="#">Business</a><br /> <a href="#">0 Comment</a>
                         </div>
                         <div class="entry-text">
                             <h2 class="posttitle"><a href="single.html">Donec consectetur libero ut tortor condimentum eu egestas est viverra.</a></h2>
                             <div class="postimg"><img src="images/content/post1.jpg" alt="" class="scale-with-grid" /><span class="shadowpostimg"></span></div>
                             <div class="entry-content">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices dui eu lectus fringilla non pellentesque magna egestas. Suspendisse potenti. Vivamus at magna libero. Donec et purus nunc, eu aliquam diam. Proin tincidunt feugiat pretium. In eget dictum urna. Proin quis leo at mi gravida luctus. Duis ornare rhoncus sem, ac eleifend ligula tempor vel. Pellentesque at justo ultrices risus varius posuere. </p>

<p>Donec consectetur libero ut tortor condimentum eu egestas est viverra. Sed eget turpis dui, sed auctor nisi. Fusce suscipit risus sed tortor mattis sollicitudin. Vivamus dictum, nisl sed aliquet sodales, nisi ipsum interdum metus, quis rhoncus felis ligula sit amet nisi. Quisque ultricies turpis nec ipsum rutrum condimentum. </p>

<p>Quisque sollicitudin, lectus sed tincidunt viverra, nisl lacus semper massa, a pellentesque lectus massa at orci. Nullam eros orci, posuere a dignissim ut, convallis molestie dolor. Donec vel ligula nisl. Nam pellentesque posuere nibh, ornare molestie eros malesuada a. Aliquam ultrices enim auctor sem facilisis pharetra.</p>
                             
                            </div>
                        </div> 
                         <div class="clear"></div>     
                    </article>

					<section id="comment">
                        <h2>4 Comments</h2>
                        <ol class="commentlist">
                            <li>
                                <div class="comment-body">
                                    <img src="images/content/avatar.gif" alt="" class="avatar" />
                                    <cite class="fn"><a href="#">Richard Delano</a></cite><span class="small">(web designer)</span><span class="tdate">August 17, 2010 - 7:15 am</span> &middot; <span class="reply"><a href="#" class="more">Reply</a></span>
                                    <div class="commenttext">
                                        <p>Nulla lobortis facilisis eros vitae mollis. Morbi consectetur, tortor ut feugiat rhoncus, nunc augue placerat massa, sit amet laoreet est libero quis nisl. Integer cursus sodales sem eu dapibus. Morbi lobortis eleifend lectus sit amet porttitor. Nam tincidunt congue laoreet.</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="comment-body">
                                    <img src="images/content/avatar.gif" alt="" class="avatar" />
                                    <cite class="fn"><a href="#">Michael John</a></cite><span class="small">(web designer)</span><span class="tdate">August 17, 2010b - 7:15 am</span> &middot; <span class="reply"><a href="#" class="more">Reply</a></span>
                                    <div class="commenttext">
                                        <p>Nulla lobortis facilisis eros vitae mollis. Morbi consectetur, tortor ut feugiat rhoncus, nunc augue placerat massa, sit amet laoreet est libero quis nisl. Integer cursus sodales sem eu dapibus. Morbi lobortis eleifend lectus sit amet porttitor. Nam tincidunt congue laoreet.</p>
                                    </div>
                                </div>
                                <ol>
                                    </ol></li><li>
                                        <div class="comment-body">
                                            <img src="images/content/avatar.gif" alt="" class="avatar" />
                                            <cite class="fn"><a href="#">Wayne Rooney</a></cite><span class="small">(web designer)</span><span class="tdate">August 17, 2010 - 7:15 am</span> &middot; <span class="reply"><a href="#" class="more">Reply</a></span>
                                            <div class="commenttext">
                                                <p>Nulla lobortis facilisis eros vitae mollis. Morbi consectetur, tortor ut feugiat rhoncus, nunc augue placerat massa, sit amet laoreet est libero quis nisl. Integer cursus sodales sem eu dapibus. Morbi lobortis eleifend lectus sit amet porttitor. Nam tincidunt congue laoreet.</p>
                                            </div>
                                        </div>
                                    </li>
                                
                            
                            <li>
                                <div class="comment-body">
                                    <img src="images/content/avatar.gif" alt="" class="avatar" />
                                    <cite class="fn"><a href="#">John Doe</a></cite><span class="small">(web designer)</span><span class="tdate">August 17, 2010 - 7:15 am</span> &middot; <span class="reply"><a href="#" class="more">Reply</a></span>
                                    <div class="commenttext">
                                        <p>Nulla lobortis facilisis eros vitae mollis. Morbi consectetur, tortor ut feugiat rhoncus, nunc augue placerat massa, sit amet laoreet est libero quis nisl. Integer cursus sodales sem eu dapibus. Morbi lobortis eleifend lectus sit amet porttitor. Nam tincidunt congue laoreet.</p>
                                    </div>
                                </div>
                            </li>
                        
                        <h2>Leave Comment</h2>
                          <form id="commentform" action="#" />
                            <fieldset>
                              <label for="name" id="name_label">Name:</label>
                              <input type="text" name="name" id="name" size="40" value="" class="text-input" />
                              <label for="email" id="email_label">Email:</label>
                              <input type="text" name="email" id="email" size="40" value="" class="text-input" />
                              <label for="msg" id="msg_label">Message:</label>
                             <textarea rows="10" name="msg" id="msg" class="textarea"></textarea><br />
                              <input type="submit" name="submit" class="button" id="submit_btn" value="Submit" />
                            </fieldset>
            
                          </form>
                    </ol></section>
					
                    <div class="clear"></div>     		
                </section>
                <aside id="sidebar" class="positionright">
                	<ul>
                        <li class="widget-container">
                        	<h2 class="widget-title">Search</h2>
                            <form method="get" id="searchform" action="#" />
                                <div class="bgsearch">
                                <input type="text" name="s" id="s" value="" /> 
                                </div>
                            </form>
                        </li>
                        <li class="widget-container">
                            <h2 class="widget-title">Categories</h2>
                            <ul>
                                <li><a href="#">Business (7)</a></li>
                                <li><a href="#">Communication (10)</a></li>
                                <li><a href="#">Featured (4)</a></li>
                                <li><a href="#">Career (3)</a></li>
                                <li><a href="#">Productivity (12)</a></li>
                                <li><a href="#">General (15)</a></li>
                            </ul>
                        </li>
                        <li class="widget-container">
                            <h2 class="widget-title">Text Widget</h2>
                            <div class="textwidget">
                            Morbi tempus velit tristique mauris convallis a volutpat lorem accumsan. Duis nunc metus, hendrerit sed ullamcorper sed, venenatis quis libero. Aenean eget erat massa, sit amet tincidunt urna. 
                            </div>
                        </li>
                        <li class="widget-container">
                            <h2 class="widget-title">Archives</h2>
                            <ul>
                                <li><a href="#">May 2012</a></li>
                                <li><a href="#">April 2012</a></li>
                                <li><a href="#">March 2012</a></li>
                                <li><a href="#">February 2012</a></li>
                                <li><a href="#">January 2012</a></li>
                            </ul>
                        </li>
                    </ul>
				</aside>
                <div class="clear"></div>
            </section>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
             
        <!-- FOOTER SIDEBAR -->
        <div id="outerfootersidebar">
        	<div id="footersidebarcontainer">
            	<footer id="footersidebar">
                
            	<div id="footcol1" class="footcol">
					<ul>
                    	<li class="widget-container">
                        	<h2 class="widget-title">Latest Post</h2>
                            <ul class="recenpost-widget">
                                <li><img src="images/content/rp1.jpg" alt="" />
                                    <h5><a href="#">Donec consectetur libero ut tortor condimentum eu egestas est viverra.</a></h5>
                                    <span class="smalldate">June 19, 2012, 3.00pm</span>
                                </li>
                                <li><img src="images/content/rp2.jpg" alt="" />
                                    <h5><a href="#">Pellentesque ac ante arcu. Mauris quis velit. eu egestas est viverra.</a></h5>
                                    <span class="smalldate">June 19, 2012, 3.00pm</span>
                                </li>
                            </ul>
                        </li>
                	</ul>
                </div>
            	<div id="footcol2" class="footcol">
                	<ul>
                        <li class="widget-container">
                            <h2 class="widget-title">Categories</h2>
                            <ul>
                                <li><a href="#">Photography Design</a></li>
                                <li><a href="#">Wordpress</a></li>
                                <li><a href="#">jQuery Tabs and Toogle</a></li>
                                <li><a href="#">Site Templates</a></li>
                                <li><a href="#">Joomla</a></li>
                                <li><a href="#">CSS3 &amp; HTML5</a></li>
                                <li><a href="#">Images</a></li>
                                <li><a href="#">News</a></li>
                                <li><a href="#">Uncategorized</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            	<div id="footcol3" class="footcol">
                	<ul>
                    	<li class="widget-container">
                        	<h2 class="widget-title">BlogRoll</h2>
                            <ul>
                                <li><a href="#">Aliquam luctus rhoncus eros, non malesuada nunc consectetur a. Donec tristique rhoncus </a></li>
                                <li><a href="#">Pellentesque ac ante arcu. Mauris quis nunc velit. Praesent hendrerit et.</a></li>
                            </ul>
                        </li>
                    	<li class="widget-container">
                        	<h2 class="widget-title">Archives</h2>
                            <ul>
                                <li><a href="#">April 2012</a></li>
                                <li><a href="#">May 2012</a></li>
                                <li><a href="#">June 2012</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            	<div id="footcol4" class="footcol">
					<ul>
                    	<li class="widget-container">
                        	<h2 class="widget-title">Gallery</h2>
                            <div id="flickr">
                            	<div class="flickr-img"><a href="#"><img src="images/content/g1.jpg" alt="" /></a></div>
                                <div class="flickr-img last"><a href="#"><img src="images/content/g2.jpg" alt="" /></a></div>
                                <div class="flickr-img"><a href="#"><img src="images/content/g3.jpg" alt="" /></a></div>
                                <div class="flickr-img last"><a href="#"><img src="images/content/g4.jpg" alt="" /></a></div>
                            </div>
                        </li>
                	</ul>
                </div>
                <div class="clear"></div>
                </footer>
            </div>
        </div>
        <!-- END FOOTER SIDEBAR -->
               
        <!-- FOOTER -->
        <div id="outerfooter">
        	<div id="footercontainer">
            	<footer id="footer">
                <ul id="footer-menu">
                	<li><a href="#">Home</a></li>   
                    <li><a href="#">About</a></li>   
                    <li><a href="#">Gallery</a></li>   
                    <li><a href="#">Portfolio</a></li>   
                    <li><a href="#">Blog</a></li>   
                    <li><a href="#">Contact</a></li>
                </ul>
                <div id="copyright">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
                </footer>
            </div>
        </div>
        <!-- END FOOTER -->
        
        <div class="clear"></div>
	</div> <!-- end outercontainer -->
    
</div> <!-- end bodychild -->

<!-- Javascript
================================================== -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<!-- jQuery Superfish -->
<script type="text/javascript" src="js/hoverIntent.js"></script> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/supersubs.js"></script>

<!-- Custom Script -->
<script type="text/javascript" src="js/custom.js"></script>



</body>
</html>
